<template>
	<view class="content">
		
		<navbarVue></navbarVue>
		
		<view class="feature-frame">
			<featureItemVue v-for="(item, index) in listData" 
							:index="index"
							:key="index"
							:item="item"></featureItemVue>
		</view>
		<uv-load-more :status="status" :loading-text="loadingText" :loadmore-text="loadmoreText" :nomore-text="nomoreText" />

		<cz-pagination @change="getData"></cz-pagination>

		<searchVue></searchVue>
	</view>
</template>

<script>
	import featureItemVue from './components/feature-item.vue';
	import searchVue from './components/search.vue'
	import navbarVue from './components/navbar.vue'
	export default {
		components: {
			featureItemVue,
			searchVue,
			navbarVue
		},
		data() {
			return {
				listData: [],
				status: 'loadmore',
				loadingText: '努力加载中',
				loadmoreText: '已加载完成',
				nomoreText: '实在没有了',
				
				avatar: [
					'chun','sanli','阿梓喵','爱蜜莉亚','八重神子','霄宫',
					'宫园熏','和','千代田桃','托尔','苏沐橙','馅子'
				]
			}
		},
		onLoad() {
			this.getData()
		},
		methods: { 
			async getData() {
				if(this.status == 'loading') return
				this.listData = []
				this.status = 'loading'
				for (let i of this.avatar) {
					let result = await this.$methods.renderImage(`https://www.crazy3.top/Images/avatar/${i}.png`)
					this.listData.push({
						url: result
					})
				}
				this.status = 'loadmore'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		min-height: 100vh;
		overflow: hidden;
		background-color: #333;
	}

	.feature-frame {
		padding: 30rpx;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 30rpx;
	}
</style>